<template>
  <div class="creator">
    <Personal :id="id" :viewer-index="index" :active="active"></Personal>
    <div class="head gap-row-16">
      <Icon size="28" class="pointer" @click="back" name="back"></Icon>
      <div class="gap"></div>
      <Icon size="28" class="pointer" @click="shareLink" name="share"></Icon>
      <Icon v-if="isLogin && !isSelf" size="28" class="pointer" @click="more(id)" name="more"></Icon>
    </div>
  </div>
  <Jsonld :schema="schema" :active="active"></Jsonld>
</template>

<script setup>
import { computed, inject, shallowRef, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useCreatorStore } from '@/store/creator'
import Jsonld from '@/components/common/Jsonld.vue'
import { useCopyToClipboard } from '@/compositions/utils/copyToClipboard'
import { useBack } from '@/compositions/viewer/back'
import { useDialog } from '@/compositions/viewer/dialog'
import { trackEvent } from '@/gtm'
import Personal from '../Personal.vue'

const props = defineProps({
  index: { type: Number, required: true },
  active: { type: Boolean },
  id: { type: Number },
})

const emits = defineEmits(['back'])
const viewerRouter = inject('viewerRouter')

const back = useBack(viewerRouter, () => emits('back'), 'creator', ['popular-creators'])

// 複製連結
const { getCreator } = useCreatorStore()
const { copy } = useCopyToClipboard()
async function shareLink() {
  const creator = await getCreator(props.id)
  copy(creator.share_url)

  trackEvent({ key: 14, meta: { aff: props.id } })
}

// 舉報/封鎖
const { more } = useDialog()
const { isLogin, userId } = storeToRefs(useAccountStore())
const isSelf = computed(() => props.id === userId.value)

// Jsonld 佈置
const schema = shallowRef(null)
watch(
  () => props.id,
  async (v, _, onCleanup) => {
    if (typeof v === 'number') {
      let cleanup = false
      onCleanup(() => (cleanup = true))

      const creator = await getCreator(v)
      if (cleanup) return

      schema.value = {
        '@context': 'https://schema.org',
        '@type': 'ProfilePage',
        // dateCreated: '{profile_creation_date}',
        // dateModified: '{profile_modified_date}',
        mainEntity: {
          '@type': 'Person',
          name: creator.nickname,
          alternateName: creator.username,
          identifier: `${creator.aff}`,
          interactionStatistic: {
            '@type': 'InteractionCounter',
            interactionType: 'https://schema.org/FollowAction',
            userInteractionCount: creator.fans,
          },
          description: creator.bio,
          image: import.meta.env.VITE_APP_URL + import.meta.env.VITE_APP_OG_IMAGE,
          sameAs: [creator.link_twitter, creator.link_instagram, creator.link_tiktok, creator.link_vida].filter(
            (v) => v,
          ),
          url: creator.share_url,
        },
      }
    }
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
.creator {
  width: 100%;
  height: 100%;
  position: relative;

  .head {
    width: calc(100% - 2rem);
    height: 1.75rem;
    margin: 0 1rem;
    position: absolute;
    top: 0.625rem;
    display: flex;
    align-items: center;

    .gap {
      flex-grow: 1;
    }
  }
}
</style>
